<header class="header" id="header">
  <div class="header__section header__section-top header__section_bg_lite">
    <div class="header__container-top container">
      <img
        class="logo header__logo-top"
        src="../../../images/header/logo-black.svg"
        alt="logo W-Wave-Radio"
      />

      <a class="btn btn_login header__login-top" href="#">Вход</a>
    </div>
  </div>

  <div class="header__section header__section-middle header__section_bg_white">
    <div class="header__container-middle container">
      <div class="burger header__burger" id="burger">
        <button class="btn burger__btn" id="burger-btn">
          <span class="burger__btn-stick"></span>
        </button>

        <div class="burger__content header__burger-content">
          <nav class="nav header__burger-nav container">
            <ul class="nav__list header__burger-list">
              <li class="nav__item header__burger-nav-item">
                <a class="link header__burger-nav-link" href="#podcast">
                  Подкасты
                </a>
              </li>

              <li class="nav__item header__burger-nav-item">
                <a class="link header__burger-nav-link" href="#transmission">
                  Передачи
                </a>
              </li>

              <li class="nav__item header__burger-nav-item">
                <a class="link header__burger-nav-link" href="#guest">Гости</a>
              </li>
              <li class="nav__item header__burger-nav-item">
                <a class="link header__burger-nav-link" href="#playlist">
                  Плейлисты
                </a>
              </li>

              <li class="nav__item header__burger-nav-item">
                <a class="link header__burger-nav-link" href="#aboutus">
                  О нас
                </a>
              </li>
            </ul>
          </nav>

          <nav
            class="nav header__burger-nav header__burger-nav-bottom header__burger-nav_bg_white header__burger-nav_show_mobile container"
          >
            <ul class="nav__list header__burger-list">
              <li class="nav__item header__burger-nav-item-second">
                <a class="link" href="#">Новости</a>
              </li>

              <li class="nav__item header__burger-nav-item-second">
                <a class="link" href="#">Блоги</a>
              </li>

              <li class="nav__item header__burger-nav-item-second">
                <a class="link" href="#">Топы</a>
              </li>

              <li class="nav__item header__burger-nav-item-second">
                <a class="link" href="#">Опросы</a>
              </li>

              <li class="nav__item header__burger-nav-item-second">
                <a class="link" href="#">Рейтинги</a>
              </li>

              <li class="nav__item header__burger-nav-item-second">
                <a class="link" href="#">Реклама</a>
              </li>
            </ul>
          </nav>
        </div>
      </div>

      <img
        class="logo header__logo-middle"
        src="../../../images/header/logo-black.svg"
        alt="logo W-Wave-Radio"
      />

      <nav class="nav header__nav-middle">
        <ul class="nav__list header__list-middle">
          <li class="nav__item">
            <a class="link header__link-middle" href="#podcast">Подкасты</a>
          </li>
          <li class="nav__item">
            <a class="link header__link-middle" href="#transmission">
              Передачи
            </a>
          </li>

          <li class="nav__item">
            <a class="link header__link-middle" href="#guest">Гости</a>
          </li>

          <li class="nav__item">
            <a class="link header__link-middle" href="#playlist">Плейлисты</a>
          </li>

          <li class="nav__item">
            <a class="link header__link-middle" href="#aboutus">О нас</a>
          </li>
        </ul>
      </nav>

      <div class="header__btns-group">
        <button aria-label="Поиск" class="btn search">
          <svg
            aria-hidden="true"
            focusable="false"
            class="search__svg"
            viewbox="0 0 24 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M11 19C15.4182 19 19 15.4183 19 11C19 6.58172 15.4182 3 11 3C6.58169 3 2.99997 6.58172 2.99997 11C2.99997 15.4183 6.58169 19 11 19Z"
              stroke="#6D31EE"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
            <path
              d="M21 21L16.65 16.65"
              stroke="#6D31EE"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>
        </button>

        <a class="btn btn_login header__login-middle" href="#">Вход</a>
      </div>
    </div>
  </div>

  <div class="header__section header__section-bottom header__section_bg_white">
    <div class="header__container-bottom container">
      <nav class="nav header__nav-bottom">
        <ul class="nav__list header__list-bottom">
          <li class="nav__item">
            <a class="link header__link-bottom" href="#">Новости</a>
          </li>

          <li class="nav__item">
            <a class="link header__link-bottom" href="#">Блоги</a>
          </li>

          <li class="nav__item">
            <a class="link header__link-bottom" href="#">Топы</a>
          </li>

          <li class="nav__item">
            <a class="link header__link-bottom" href="#">Опросы</a>
          </li>

          <li class="nav__item">
            <a class="link header__link-bottom" href="#">Рейтинги</a>
          </li>

          <li class="nav__item">
            <a class="link header__link-bottom" href="#">Реклама</a>
          </li>
        </ul>
      </nav>

      <div class="header__players-btns">
        <div role="button" tabindex="0" class="player header__player">
          <svg
            aria-hidden="true"
            focusable="false"
            class="player__svg header__player-svg"
            viewbox="0 0 20 20"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M10 0C4.475 0 0 4.475 0 10C0 15.525 4.475 20 10 20C15.525 20 20 15.525 20 10C20 4.475 15.525 0 10 0ZM8 14.5V5.5L14 10L8 14.5Z"
              fill="#A1A6B4"
            />
          </svg>

          <div class="player__content header__player-content">
            <p class="player__title header__player-title">Ранее в эфире</p>

            <p class="player__title-radio header__player-title-radio">
              &laquo;Музыка&raquo;
            </p>
          </div>
        </div>

        <div role="button" tabindex="0" class="player header__player">
          <svg
            aria-hidden="true"
            focusable="false"
            class="player__svg header__player-svg"
            viewbox="0 0 20 20"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M10 0C4.475 0 0 4.475 0 10C0 15.525 4.475 20 10 20C15.525 20 20 15.525 20 10C20 4.475 15.525 0 10 0ZM8 14.5V5.5L14 10L8 14.5Z"
              fill="#A1A6B4"
            />
          </svg>

          <div class="player__content header__player-content">
            <p class="player__title header__player-title">Сейчас в эфире</p>

            <p class="player__title-radio header__player-title-radio">
              &laquo;Как так?&raquo;
            </p>
          </div>
        </div>
      </div>

      <div class="age header__age"></div>
    </div>

    <div class="panel header__panel" id="panel">
      <button class="btn panel__btn header__panel-btn" id="panel-btn">
        <svg
          class="panel__svg header__panel-svg"
          width="15"
          height="15"
          viewBox="0 0 15 15"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <circle cx="7.5" cy="7.5" r="7.5" fill="#6D31EE" />
          <path d="M12 7.00014V8.00014H3V7.00014H12Z" fill="white" />
          <path d="M8 12.0001H7L7 3.00014L8 3.00014L8 12.0001Z" fill="white" />
        </svg>
        Что в эфире?
      </button>

      <div class="panel__content header__panel-content container">
        <div role="button" tabindex="0" class="player header__panel-player">
          <svg
            aria-hidden="true"
            focusable="false"
            class="player__svg header__panel-player-svg"
            viewbox="0 0 20 20"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M10 0C4.475 0 0 4.475 0 10C0 15.525 4.475 20 10 20C15.525 20 20 15.525 20 10C20 4.475 15.525 0 10 0ZM8 14.5V5.5L14 10L8 14.5Z"
              fill="#A1A6B4"
            />
          </svg>

          <div class="player__content header__panel-player-content">
            <p class="player__title header__panel-player-title">
              Ранее в эфире
            </p>

            <p class="player__title-radio header__panel-player-title-radio">
              &laquo;Музыка&raquo;
            </p>
          </div>
        </div>

        <div role="button" tabindex="0" class="player header__panel-player">
          <svg
            aria-hidden="true"
            focusable="false"
            class="player__svg header__panel-player-svg"
            viewbox="0 0 20 20"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M10 0C4.475 0 0 4.475 0 10C0 15.525 4.475 20 10 20C15.525 20 20 15.525 20 10C20 4.475 15.525 0 10 0ZM8 14.5V5.5L14 10L8 14.5Z"
              fill="#A1A6B4"
            />
          </svg>

          <div class="player__content header__panel-player-content">
            <p class="player__title header__panel-player-title">
              Сейчас в эфире
            </p>

            <p class="player__title-radio header__panel-player-title-radio">
              &laquo;Как так?&raquo;
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</header>
